<template>
    <NThing content-style="width:100%">
        <template #avatar>
            <NAvatar :src="imgurl + props.data.author.avatar" fallback-src="/avatar-defalut-small.webp">
            </NAvatar>
        </template>
        <template #header>
            {{ props.data.author.nickname }}（{{ props.data.author.name }}）
        </template>
        <template #description>
            回答于 <NTime :time="props.data.date"></NTime>
        </template>
        <NSpace>
            <div v-html="output"></div>
        </NSpace>
    </NThing>
</template>


<script setup lang="ts">
import { NAvatar, NThing, NTime, NSpace } from "naive-ui";

const props = defineProps(['data']);
const imgurl = window.apiurl + "avatar/";

// 导入 Markdown 渲染器
import { Marked } from 'marked'
// 导入语法高亮插件
import { markedHighlight } from "marked-highlight";
import "highlight.js/styles/atom-one-light.min.css";
import hljs from 'highlight.js';
import DOMPurify from 'dompurify';
import { computed } from "vue";


const marked = new Marked(
    markedHighlight({
        emptyLangClass: 'hljs',
        langPrefix: 'hljs language-',
        highlight(code, lang, info) {
            const language = hljs.getLanguage(lang) ? lang : 'plaintext';
            return hljs.highlight(code, { language }).value;
        }
    })
);
// 过滤xss并渲染
const output = computed(() => {
    return marked.parse(DOMPurify.sanitize(props.data.content || ''));
})


function handleChange() {
    window.$utils.message.error("功能未实现")

}


</script>